<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Experience Analysis</title>
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <header>
        <h1>用户体验分析</h1>
    </header>

    <nav>
        <a href="#">首页</a>
        <a href="#">关于我们</a>
        <a class="nav-link" href="#section2">服务</a>
        <a class="nav-link" href="#about-me">了解我们</a>
    </nav>

    <div class="container">
        <div class="main-content">
            <h1>关于我们</h1>
            <h2>欢迎来到我们的用户体验分析平台</h2>
            <p>上传您的用户行为数据，并收到详细的分析报告以及体验分数。</p>
            <p>我们可以通过在一定时间内网站上获取到的完整用户行为会话数据，通过
                算法来判断出这段时间内这些会话中的体验问题，同时可以结合网站用户体验
                评分的模型来给网站一个用户体验分析报告</p>

            <!-- Upload form -->
            <div class="upload-form" id="section2">
                <h2>上传用户行为数据</h2>
                <form id="upload-form-dataSet" enctype="multipart/form-data">
                    <input type="file" id="file-input" name="user-data" multiple>
                    <button type="submit">上传</button>
                </form>
            </div>

            <!-- Analysis results -->
            <div class="report" id="report">
                <h2>分析报告</h2>
                <ul data-res-list class="report-container"></ul>
            </div>

        </div>

        <div class="sidebar">
            <h3>最新分析</h3>
            <div>敬请期待</div>
            <!-- Display recent analysis results or other relevant information in the sidebar -->
        </div>

    </div>

    <div class="about-component" id="about-me">
        <div class="about-us">
            <h3>关于我们</h3>
            <p>个人开发者 方向: 人工智能/软件开发</p>
        </div>
        <div class="wechat-qrcode">
            <img src="../assets/about_me.jpg" alt="微信二维码" title="扫描关注我们的微信">
            <p>扫描上方二维码，关注我的微信，共同学习一起进步。</p>
        </div>
    </div>

    <footer>
        © 2024 User Experience Analysis Platform
    </footer>

    <!--     <div class="d-flex justify-content-center alert-info" style="margin-top: 3px;" id="section4">
        <h2>联系我们</h2>
        <div class="jumbotron text-center contact-form">
            <section>
                <p>欢迎使用用户体验分析平台网页</p>
                <p>如果有疑问可以联系我们！</p>
                <form id="contact-form" onsubmit="submitForm(event)">
                    <label for="name">姓名：</label>
                    <input type="text" id="name" name="name" required>
                    <label for="email">联系方式：</label>
                    <input type="email" id="email" name="email" required>
                    <label>性别:</label>
                    <input type="radio" id="male" name="gender" value="male" checked>
                    <label for="male">男</label>
                    <input type="radio" id="female" name="gender" value="female">
                    <label for="female">女</label>
                    <input type="submit" value="提交">
                </form>
            </section>
            <h3>我们随时在线</h3>
        </div>
    </div> -->

    <script src="../js/app.js"></script>

</body>

</html>